<div class="kuiSideBarSection">
  <div class="form-group">
    <div class="kuiSideBarSectionTitle">
      <div class="kuiSideBarSectionTitle__text">
        Layer Settings
      </div>
    </div>

    <div class="kuiSideBarFormRow">
      <label class="kuiSideBarFormRow__label" for="regionMap">
        Vector map
      </label>
      <div class="kuiSideBarFormRow__control">
        <select
          id="regionMap"
          class="kuiSelect kuiSideBarSelect"
          ng-model="vis.params.selectedLayer"
          ng-options="layer.name for layer in collections.vectorLayers track by layer.layerId"
          ng-change="onLayerChange()"
        ></select>
      </div>
    </div>

    <div class="kuiSideBarFormRow">
      <label class="kuiSideBarFormRow__label" for="joinField">
        Join field
      </label>
      <div class="kuiSideBarFormRow__control">
        <select id="joinField"
          class="kuiSelect kuiSideBarSelect"
          ng-model="vis.params.selectedJoinField"
          ng-options="field.description for field in vis.params.selectedLayer.fields track by field.name"
        >
          <option value=''>Select</option></select>
      </div>
    </div>
    <div class="kuiSideBarFormRow">
      <label class="kuiSideBarFormRow__label" for="displayWarnings">
        Display warnings &nbsp;
        <kbn-info info="Turns on/off warnings. When turned on, warning will be shown for each term that cannot be matched to a shape in the vector layer based on the join field. When turned off, these warnings will be turned off."></kbn-info>
      </label>

      <div class="kuiSideBarFormRow__control">
        <input id="displayWarnings" type="checkbox" ng-model="vis.params.isDisplayWarning">
      </div>
    </div>
  </div>
</div>

<div class="kuiSideBarSection">

  <div class="kuiSideBarSectionTitle">
    <div class="kuiSideBarSectionTitle__text">Style settings</div>
  </div>
  <div class="kuiSideBarFormRow" >
    <label class="kuiSideBarFormRow__label" for="colorSchema">
      Color Schema
    </label>
    <div class="kuiSideBarFormRow__control">
      <select
        id="colorSchema"
        class="kuiSelect kuiSideBarSelect"
        ng-model="vis.params.colorSchema"
        ng-options="mode for mode in collections.colorSchemas"
      ></select>
    </div>
  </div>
</div>


<div class="kuiSideBarSection">
  <div class="kuiSideBarSectionTitle">
    <div class="kuiSideBarSectionTitle__text">
      Base Layer Settings
    </div>
  </div>
  <wms-options></wms-options>
</div>
